<template>
    <div>
        <div class="wrap">
            <!-- 头部登录 -->
            <div class="heade">
                <i class="close" @click="handleClosedl()"></i>
                <h2 class="l-txt">登录</h2>
		    </div>
            <!-- 乐村淘账户登陆 -->
            <div class="login-form-dl">
                <a href="#" class="login-dl">乐村淘账户登录</a>
                <a href="./register" class="login-zc">免费注册</a>
            </div>
            <!-- 账户密码 -->
            <div class="login-con">
                <form class="form-cur" id="logInFrom">
					<div class="f-wrap">
						<input type="text" placeholder="输入手机号/用户名" class="username" name="username" id="username" autocomplete="off" v-model="username">
						<em class="l-line"></em>
		          		<input type="password" placeholder="请输入密码" class="pwd" name="password" id="userpwd" autocomplete="off" v-model="password">
					</div>
	          		<a href="javascript:;" class="btn-login" id="loginBtn" @click="clicklogin()">登录</a>
	          		<a href="./retphone.html" class="btn-password">找回密码</a>
				</form>
            </div>
        </div>
        <div class="flylogin" v-show="istruelogin">登录成功,即将跳转首页</div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      istruelogin: false
    }
  },
  methods: {
    handleClosedl () {
      this.$router.back('/home')
    },
    clicklogin () { // 登录
      const user = { name: this.username, pwd: this.password }
      const info = JSON.parse(localStorage.getItem('user'))
      if (user.name == info.name && user.pwd == info.pwd) {
        this.istruelogin = true
        console.log('登录成功')
        this.$router.push('./home')
      } else {
        console.log('登录失败')
      }
    }
  }
}
</script>
<style lang="scss">
    body{
        background: #f0f0f0;
    }
    .wrap{
        width: 100%;
        height: 100%;
        max-width: 720px;
        .heade{
           display:flex;
           height:50px;
           align-items: center;
           position: relative;
           background: #f0f0f0;
        .close{
            height:20px;
            width:20px;
            display: block;
            background:url("https://m.lecuntao.com/resource/images/login/close.png?lv=c5dce8706a");
            background-size:100% 100%;
            position: absolute;
            left: 10px;
        }
        .l-txt{
            font-size: 18px;
            margin:0px auto;
            font-weight: normal;
            line-height: 100%;
        }
     }
        .login-form-dl{
            width: 90%;
            height: 40px;
            margin:0 auto;
            font-size: 14px;
            border-radius: 5px;
            margin-bottom: 20px;
            overflow: hidden;
            border: 0.02rem solid #f81234;
            line-height: 0.8rem;
            text-align: center;
            .login-dl{
                color: #fff;
                height: 100%;
                width:50%;
                background-color:#f81234;
                float: left;
                text-decoration: none;
            }
            .login-zc{
                width: 50%;
                text-align: center;
                float: right;
                color: #333;
                height: 100%;
                text-decoration: none;
            }
        }
        .login-con{
            .form-cur{
                .f-wrap{
                    // border-radius: 10px;
                    // background: #fff;
                    // width: 90%;
                    // margin: 0px auto;
                    // border:none;

                .l-line{
                    width: 94%;
                    margin-left: 3%;
                    height: 0.02rem;
                    background: #ccc;
                    display: block;
                }
                .username{
                    height: 38px;
                    border:none;
                    display: block;
                    font-size: 12px;
                    padding-left: 35px;
                    background:url("https://m.lecuntao.com/resource/images/login/icon_login.png?lv=0604d8cffe") no-repeat 10px 10px;
                    background-size:20px 20px;
                    width: 90%;
                    outline-style: none ;
                }
                .pwd{
                    border:none;
                    height: 38px;
                    display: block;
                    font-size: 12px;
                    padding-left: 35px;
                    width: 90%;
                    outline-style: none ;
                    background:url("https://m.lecuntao.com/resource/images/login/icon_lock.png?lv=3f0f2d60c4") no-repeat 10px 10px;
                    background-size:20px 20px;
                }
             }
                .btn-login{
                    width: 90%;
                    margin:0px auto;
                    color: #fff;
                    background: #f81234;
                    height: 40px;
                    font-size: 16px;
                    text-align: center;
                    line-height: 0.9rem;
                    margin-top: 0.5rem;
                    display: block;
                    border-radius: 0.08rem;
                    text-decoration: none;
                }
                .btn-password{
                    width: 90%;
                    margin:0px auto;
                    color: #808080;
                    background: #fff;
                    height: 40px;
                    font-size: 16px;
                    text-align: center;
                    line-height: 0.9rem;
                    margin-top: 0.2rem;
                    display: block;
                    border-radius: 0.08rem;
                    text-decoration: none;

                }

            }
        }
    }
                .flylogin{
                    width: 200px;
                    height:50px;
                    background:red;
                    position: fixed;
                    top:40%;
                    left:25%;
                    font-size: 18px;
                    color:white;
                    border-radius:10px;
                    text-align: center;
                    padding-top:15px;
                }
</style>
